<!DOCTYPE html>
<html >
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="../js/angular.js" ></script>
		<title></title>
		<link rel="stylesheet" href="../css/font-awesome/css/font-awesome.css">
	</head>

	<body ng-app="app" >
		<div ng-controller="ctrl" >
			<table border="1" width="600" >
				<tr>
					<td ng-click="orderby('id')" >id
						<i ng-if="filtd['id']" class="fa fa-caret-down" ></i>
						<i ng-if="!filtd['id']" class="fa fa-caret-up " ></i>
					</td>
					<td ng-click="orderby('name')">名称
						<i ng-if="filtd['name']" class="fa fa-caret-down" ></i>
						<i ng-if="!filtd['name']" class="fa fa-caret-up " ></i>
					</td>
					<td ng-click="orderby('url')">url
						<i ng-if="filtd['url']" class="fa fa-caret-down" ></i>
						<i ng-if="!filtd['url']" class="fa fa-caret-up " ></i>
					</td>
				</tr>
				<tr ng-repeat="v in data" >
					<td>{{v.id}}</td>
					<td>{{v.name}}</td>
					<td>{{v.url}}</td>
				</tr>
			</table>
		</div>
		<script>
			var app=angular.module("app",[]);
			app.controller("ctrl",["$scope","$filter",function($scope,$filter){
                $scope.data=[
                    {id:1,name:"张三",url:"http://baidu.com"},
					{id:2,name:"李四",url:"http://163.com"},
					{id:3,name:"王五",url:"http://163.com"},
					{id:4,name:"周六",url:"http://163.com"}
					];
                $scope.filtd={};
				$scope.orderby=function (filter) {
				    if($scope.filtd[filter]==undefined)
					{
                        $scope.filtd[filter]=true;
					}else {
                        $scope.filtd[filter]=!$scope.filtd[filter];
					}
					$scope.data=$filter('orderBy')($scope.data,filter,$scope.filtd[filter]);
                }
			}]);
		</script>
	</body>
</html>
